<template>
  <div class="main-content">
    <el-header>
      <span class="op-left">
      <label>产品型号：</label>
      <el-select v-model="defaultProduct" class="el-select el-select-group">
        <el-option v-for="(op, value) in productList" :key="value" :label="op.text" :value="op.value"></el-option>
      </el-select>
      <el-button class="el-button--primary" >查询</el-button>
        </span>
      <el-button class="el-button--primary add-btn" >添加设备</el-button>
    </el-header>
      <el-table :data="deviceList" stripe border>
        <el-table-column prop="id" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="model" label="产品型号" align="center"></el-table-column>
        <el-table-column prop="connStyle" label="连接方式" align="center"></el-table-column>
        <el-table-column prop="addr" label="地址" align="center"></el-table-column>
        <el-table-column prop="port" label="端口" align="center"></el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="180px">
          <template v-slot:default="scope">
            <el-button @click="">编辑</el-button>
            <el-button @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  name: "deviceManager",
  data() {
    return {
      defaultProduct:"",
      productList: [
        {text:"frozen", value:"frozen"},
        {text:"mt1", value:"mt1"}
      ],
      deviceList: [
        {id: 1, name:"测试设备1", model: "frozen", connStyle:"http", addr:"192.168.31.243", port:5555},
        {id: 2, name:"测试设备2", model: "frozen", connStyle:"串口", addr:"", port:""},
        {id: 3, name:"测试设备3", model: "mt1", connStyle:"adb", addr:"192.168.31.243", port:""}
      ]
    }
  }
}
</script>

<style scoped>
.main-content {
  padding: 10px;
}
.add-btn {
  float: right;
}
.op-left {
  float: left;
}
</style>